 <?php if ($this->get('list') == 1){ ?>
 	<style>#add-ed-sup label.error{ margin: -12px 0 0 -115px;display:inline-block;text-indent:5px; }</style>
     <div id="new-category">
		<form id="add-ed-sup" class="form_style registed finished" style="margin-top:0px;margin-bottom:-10px;" flag="0">
			<div style="float:left;">
                <strong>Supplier Name*</strong><br/>
                <input type="text" name="sname" class="" value="" placeholder="Supplier Name..."/>
                <br />
                <strong>Representative*</strong><br/>
                <input type="text" name="srep" class="" value="" placeholder="Representative Full Name..."/>
                <br />
                <strong>Contact*</strong><br/>
                <input type="text" name="scon" class="" value="" placeholder="Tel. No..."/>
                <br />
                <strong>Email*</strong><br/>
                <input type="text" name="semail" class="" value="" placeholder="Email Address..."/>
                <br />
                <strong>Location*</strong><br/>
                <input type="text" name="sadd" class="" value="" placeholder="Address..."/>
                <br />
    			<input type="button" value="Add" />
    			<input type="button" value="Edit" />
    			<input type="button" value="Cancel" />
    			<div class="clear"></div>
			</div>
    		<div style="height: 400px;overflow: auto;float: right;width: 420px;border: 1px solid #e0e0e0;">
        		<table>
					<thead>
            			<tr style="display:block;position:relative;">
            				<th style="width:320px">Supplier</th>
            				<th class="bg" colspan="2" style="width:100px">Options</th>
            			</tr>
					</thead>
					<tbody id="sup-list" style="height: 320px;overflow: auto;display: block;width:100%">
		<?php foreach($supply_details as $sup){ ?>		
            			<tr class="list" sid="<?php echo $sup['sdid']; ?>">
            				<td style="width:320px"><?php echo $sup['name']; ?></td>
            				<td class="bg" style="width:50px">
    						<a class="edit-supplier" href="#">Edit</a>
    						<input type="hidden" value="<?php echo $sup['name']; ?>" />
    						<input type="hidden" value="<?php echo $sup['representative']; ?>" />
    						<input type="hidden" value="<?php echo $sup['contact']; ?>" />
    						<input type="hidden" value="<?php echo $sup['email']; ?>" />
    						<input type="hidden" value="<?php echo $sup['address']; ?>" />
    						</td>
							<td class="bg" style="width:50px">
    						<a class="del-supplier" href="#">Delete</a>
							</td>
            			</tr>
		<?php } ?>
					</tbody>
        		</table>
    		</div>
    		<div class="clear"></div>
		</form>
    </div>
	<script>
	$('input[value=Add]').next().hide().next().hide();
	var ree_func = function(){
    	$('.del-supplier').click(function(e){
    		var id = $(this).parent().parent().attr('sid');
			var x = $(this).parent().parent();
			e.preventDefault();
    		$.post('?module=pos&action=inventory&action2=supplier&ajax=true',{delete:3,id:id},function(){
    			x.fadeOut('slow',function(){$(this).remove()});
    		});
    	});
    	$('.edit-supplier').click(function(e){
			e.preventDefault();
    		$("#add-ed-sup").attr('flag',$(this).parent().parent().attr('sid'));
    		$('input[name=sname]').val($(this).next().val()).focus();
    		$('input[name=srep]').val($(this).next().next().val()).focus();
    		$('input[name=scon]').val($(this).next().next().next().val()).focus();
    		$('input[name=semail]').val($(this).next().next().next().next().val()).focus();
    		$('input[name=sadd]').val($(this).next().next().next().next().next().val()).focus();
    		$('input[value=Add]').hide();
    		$('input[value=Add]').next().fadeIn('slow').next().fadeIn('slow').focus();
    	});
	};
	ree_func();
	$('input[value=Cancel]').click(function(){
		$(this).hide();
		$('input[value=Add]').fadeIn('slow');
		$('input[value=Edit]').hide();
		$('input[name=sname]').val("");
		$('input[name=srep]').val("");
		$('input[name=scon]').val("");
		$('input[name=semail]').val("");
		$('input[name=sadd]').val("");
		$("#add-ed-sup").attr('flag',0);
	});
	$('input[value=Add]').click(function(){$( "#add-ed-sup" ).submit();});
	$('input[value=Edit]').click(function(){$( "#add-ed-sup" ).submit();});
	$( "#add-ed-sup" ).submit(function(e){e.preventDefault();}).validate({
    	submitHandler: function(form) {
			$.post('?module=pos&action=inventory&action2=supplier&ajax=true',{
				sname:$('input[name=sname]').val(),
				srep:$('input[name=srep]').val(),
				scon:$('input[name=scon]').val(),
				semail:$('input[name=semail]').val(),
				sadd:$('input[name=sadd]').val(),
				edit:$("#add-ed-sup").attr('flag')
			},function(data){
				id = data.trim();
				if(data.trim() == "Already Exist!"){
					alert(data);
					return;
				}
				if(data.trim() == "Successfully Updated!"){
					$("#sup-list").find('tr[sid=' + $("#add-ed-sup").attr('flag') + ']').remove();
					id = $("#add-ed-sup").attr('flag');
				}
  				$("#sup-list").append(
              			'<tr class="list" sid="' + id + '">' +
              			'	<td style="width:320px">' + $('input[name=sname]').val() + '</td>' +
              			'	<td class="bg"  style="width:50px">' +
      					'	<a class="edit-supplier" href="#">Edit</a>' +
      					'	<input type="hidden" value="' + $('input[name=sname]').val() + '" />' +
      					'	<input type="hidden" value="' + $('input[name=srep]').val() + '" />' +
      					'	<input type="hidden" value="' + $('input[name=scon]').val() + '" />' +
      					'	<input type="hidden" value="' + $('input[name=semail]').val() + '" />' +
      					'	<input type="hidden" value="' + $('input[name=sadd]').val() + '" />' +
      					'	</td>' +
  						'	<td style="width:50px">' + 
      					'	<a class="del-supplier" href="#">Delete</a>' +
  						'	</td>' +
              			'</tr>'
  				);
				$("#add-ed-sup").attr('flag',0);
				$('input[name=sname]').val("");
				$('input[name=srep]').val("");
				$('input[name=scon]').val("");
				$('input[name=semail]').val("");
				$('input[name=sadd]').val("");
				$('input[value=Edit]').val("Add").next().hide().next().fadeIn();
				ree_func();
			});
    	},
    	rules: {
			sname: {
    			required: true
    		},
			srep: {
    			required: true
    		},
			scon: {
    			required: true
    		},
			semail: {
    			required: true,
				email: true
    		},
			sadd: {
    			required: true
    		}
    	}
	});
	</script>
 <?php }else{ ?>
						<strong>Add Supplier</strong><br />
                		<select name="supplier" class="selection" id="supplier-listing">
                			<option value="0">Select Supplier</option>
							<?php foreach($supply_details as $sup){ ?>	
                			<option value="<?php echo $sup['sdid']; ?>"><?php echo $sup['name']; ?></option>	
							<?php } ?>
                		</select>&emsp;
                		<a href="#" class="sup-rem">Remove</a>
						<div id="supplier-option" style="display:inline;">
                  			<div style="margin-top: 10px;">
                      			<hr />
                      			<br />
								<strong>Unit of Measurement: </strong>&emsp;
								<select id="qty-measurement" name="sup_qty">
                    				<option value="0" per="0">Select Unit</option>
                    			<?php foreach($measure as $per){ ?>
                    				<option value="<?php echo $per['imdid']; ?>" per="<?php echo $per['default_per']; ?>" flag="<?php echo $per['flag']; ?>"><?php echo $per['name']; ?></option>
								<?php } ?>
								</select> &emsp;<a href="javascript:$('#add-new-unit').dialog('open');">Add</a>&emsp;<a id="del-unit" style="display:none;" href="#">Delete</a>
        						<br /><br />
            					<strong>Per Piece: </strong>&emsp;<input name="sup_per" id="qty-per-pc" style="width:80px" type="text" placeholder="0"/>
								<br /><br />
                          		<strong>Item Cost:</strong><br/>
                          		<input type="text" name="cost" class="" value="" placeholder="Cost..."/><br /><br />
								<input type="button" value="Add" class="sup-add" />
    							<br />
    							<div class="clear"></div>
                  			</div>
							<input type="submit" style="display:none;" />	
						</div>
            			<div style="height:150px;overflow:auto;width:100%;">
                			<table id="supplier-added">
								<thead>
                    				<tr>
                						<th width="10%"></th>
                    					<th width="40%">Supplier</th>
                    					<th width="30%">Unit</th>
                    					<th width="20%">Cost</th>
                    				</tr>
								</thead>
								<tbody id="supplier-lists">
								</tbody>
                			</table>
            			</div>
            			<div class="clearfix"></div>
				<script>
                  $('#supplier-option').hide();
				  <?php if(isset($edit)){ ?>
				  $('#supplier-added').parent().hide();
				  <?php } ?>
				  $('.sup-rem').hide();
                  $('#supplier-listing').change(function(){
						var id = $('#supplier-listing').val();
                    	if($(this).val() != 0 && !($('#supplier-added tbody').find('#sd'+id).length)){
                    		$('#supplier-option').fadeIn('slow');
                    	}else{
                    		$('#supplier-option').fadeOut('slow');
                    	}
						if(!($('#supplier-added tbody').find('tr').length)){
							$('#supplier-added').parent().fadeOut();
							$('.sup-rem').fadeOut('slow');
						}else{
							$('#supplier-added').parent().fadeIn('slow');
							$('.sup-rem').fadeIn('slow');
						}
                  });
				  $('#supplier-option .sup-add').click(function(e){
						//$( "#last-step" ).attr('sup', 1).submit();
						process_sup();
				  		e.preventDefault();
				  });
				  
				  $('.sup-rem').click(function(e){
				  		e.preventDefault();
						$('#supplier-added tbody').find("td input[type='checkbox']:checked").parent().parent().fadeOut('slow',function(){$(this).remove();});
						if(!($('#supplier-added tbody').find('tr').length)){
							$('#supplier-added').parent().fadeOut('slow');
							$('.sup-rem').fadeOut('slow');
						}
				  })
				  
				  var process_sup = function(){
				  	$( "#last-step" ).attr('sup', 0);
    				var id = $('#supplier-listing').val();
    				var name = $('#supplier-listing option[value="' + id + '"]').text();
    				var cost = $('#supplier-option').find('input[name=cost]').val();
    				var edate = $('#supplier-option').find('input[name=edate]').val();
    				var unit = $('#qty-measurement').find('option[value='+$('#qty-measurement').val()+']').text();
					var unit2 = $('#qty-measurement').val()
					var per = $('#supplier-option').find('input[name=sup_per]').val();

					if(unit.length == 0 || unit == 0){
    					alert("Select a unit of measurement.");
						return;
					}
					if(per.length == 0 || isNaN(per)){
    					alert("Invalid quantity in per value!");
						return;
					}
					if(cost.length == 0 || isNaN(cost)){
    					alert("Invalid cost value!");
						return;
					}
					/*if(edate.length == 0 || isNaN(edate)){
    					alert("Invalid value in expected date!");
						return;
					}*/
    				$('#supplier-option').find('input[name=cost]').val("");
    				if($('#supplier-added tbody').find('#sd'+id).length){
    					alert("Already added!");
    					return;
    				}
                  		var slot = '<tr class="list" id="sd' + id + '" sid="' + id + '" unit="' + unit2 + '" per="' + per + '" cost="' + cost + '" >' +
              				   '	<td style="text-align:left;"><input class="niceCheck" type="checkbox" /></td>'+
                  			   '	<td style="text-align:left;">' + name + '</td>'+
                  			   '	<td class="bg ui-text-center">' + unit + '('+per+')</td>'+
                  			   '	<td class="bg ui-text-center">P ' + formatCurrency(cost,true) + '</td>'+
                  			   '</tr>';
                      	$('#supplier-option').hide();
					$('input[name=wholesale_price2]').val(formatCurrency(cost)).trigger('change');
    				$('input[name=retail_price2]').val(formatCurrency(cost/per)).trigger('change');
    				$('#supplier-added tbody').append(slot).fadeIn('slow');
    				$('#supplier-listing').val(0);
    				$('#supplier-added').parent().fadeIn('slow');
    				$('.sup-rem').fadeIn('slow');
    				$('#qty-measurement').val(0);
    				$('#qty-per-pc').val(0);
    				$('#supplier-option').find('input[name=edate]').val("");
					$('#supplier-added tbody .list').click(function(){
						$('input[name=wholesale_price2]').val(formatCurrency($(this).attr('cost'))).trigger('change');
    					$('input[name=retail_price2]').val(formatCurrency($(this).attr('cost')/$(this).attr('per'))).trigger('change');
					});
				  }
                  </script>
<?php } ?>